import React from "react";
import Select from 'antd/lib/select';
import Checkbox from 'antd/lib/checkbox';
import Form from 'antd/lib/form';
import Col from 'antd/lib/col';
import Row from 'antd/lib/row';
import Input from 'antd/lib/input';
import 'antd/dist/antd.less'
import Enums from "@/services/enums";

export default class TabletypeTable extends React.Component {
  state = {
    loading: true,
    id: 0,
    code: "",
    name: "",
    numauto: false,
    numhand: false,
    numhead: "",
    numdate: "",
    numfoot: 1,
    footlenth: 4,
    billtypedata:[],
    isCreatetabletypeEnabled: true,
  };
  // componentDidMount() {
  //   const userId = this.props.userId || currentUser.id;
  // }
  componentWillMount() {
    Enums.items("bill_enum").then(data => {
      this.setState({
        billtypedata: data,
      });
    });
    this.refreshData(this.props.data);
  }
  componentDidMount() {
    　　this.props.onRef(this);
  }
   componentWillUnmount() {
    const data=
      {
        id: this.state.id,//
        code: this.state.code,//
        name: this.state.name,//
        numauto:this.state.numauto,//
        numhand: this.state.numhand,//
        numhead:this.state.numhead,//
        numdate: this.state.numdate,//
        numfoot: this.state.numfoot,//
        footlenth: this.state.footlenth,//
      }
    　　this.props.childchange(data);
  }
     // 这种方式十分适合父子组件的互动，通常是父组件需要通过某些状态控制子组件渲染亦或销毁...
componentWillReceiveProps(nextProps) {//componentWillReceiveProps方法中第一个参数代表即将传入的新的Props
    this.refreshData(nextProps.data);
}

  refreshData(data ) {
          this.setState({
            id: data.id,//
            code: data.code,//
            name: data.name,//
            numauto:data.numauto,//
            numhand: data.numhand,//
            numhead:data.numhead,//
            numdate: data.numdate,//
            numfoot: data.numfoot,//
            footlenth: data.footlenth,//
            loading: false,
          });
  }

  render() {
    if (this.state.loading) return null;
    return(
      <div>
      <Form layout="horizontal" {...{labelCol: { span: 4 }, wrapperCol: { span: 14 },} }>
      <Row>
		  <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="单据名称">
              <Input
                value={this.state.name}
                onChange={e => this.setState({name:e.target.value})}
                disabled ={true}
                placeholder="名称"
              />
              </Form.Item>
        </Col>
        </Row>
        <Row>
          <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="自动编号">
               <Checkbox checked={this.state.numauto} onChange={e => this.setState({numauto:e.target.checked})}>自动编号</Checkbox>
                </Form.Item>
          </Col>
          <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="手动编号">
               <Checkbox checked={this.state.numhand} onChange={e => this.setState({numhand:e.target.checked})}>手动编号</Checkbox>
                </Form.Item>
          </Col>
        </Row>
       <Row>
		 <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="标志">
              <Input
                value={this.state.numhead}
                onChange={e => this.setState({numhead:e.target.value})}
                placeholder="标志"
                autoFocus
              />
            </Form.Item>
          </Col>
			<Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="日期">
                  <Select style={{ width:  300 }} value={this.state.numdate} onChange={value => this.setState({numdate:value})}>
                    <Select.Option key=" " value=" "> </Select.Option>
                    <Select.Option key="YYYY" value="YYYY">YYYY</Select.Option>
                    <Select.Option key="YYYYMM" value="YYYYMM">YYYYMM</Select.Option>
                    <Select.Option key="YYYYMMDD" value="YYYYMMDD">YYYYMMDD</Select.Option>
                  </Select>
            </Form.Item>
			</Col>
        </Row>
       <Row>
		 <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="流水号起始">
              <Input
                value={this.state.numfoot}
                onChange={e => this.setState({numfoot:e.target.value})}
                placeholder="流水号起始"
                autoFocus
              />
            </Form.Item>
          </Col>
		 <Col span={10}>
            <Form.Item style={{ marginBottom: 5 }} label="流水号长度">
              <Input
                value={this.state.footlenth}
                onChange={e => this.setState({footlenth:e.target.value})}
                placeholder="流水号长度"
                autoFocus
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
    );
  };
}
